<template>
  <div class="m-y-24px flex">
    <el-menu class="w240px !b-0" default-active="1" @select="clickMenu">
      <el-menu-item index="1">
        <div class="flex justify-between w-full">
          <span>视频</span>
          <span>0</span>
        </div>
      </el-menu-item>
      <el-menu-item index="2">
        <div class="flex justify-between w-full">
          <span>图文</span>
          <span>0</span>
        </div> </el-menu-item
      ><el-menu-item index="3">
        <div class="flex justify-between w-full">
          <span>音频</span>
          <span>0</span>
        </div>
      </el-menu-item>
    </el-menu>

    <div class="flex justify-center items-center flex-1">
      <span class="iconfont icon-meiyoufenzu text-150px c-#999"></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MenuItemClicked } from "element-plus";

const clickMenu = (
  index: string,
  indexPath: string[],
  item: MenuItemClicked
) => {
  console.log(index, item);
};
</script>

<style scoped>
::v-deep(.el-menu-item.is-active) {
  background-color: #00aeec;
  border-radius: 8px;
  color: #fff;
}
::v-deep(.el-menu-item:hover) {
  border-radius: 8px;
}

::v-deep(.el-menu-item) {
  margin-top: 6px;
  margin-bottom: 6px;
}
</style>
